<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        span{
            display: inline-block;
            width: 100px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="text" v-model="userName">
        <ul>
            <li v-for="item in filterList" :key="item.id">
                <span>{{item.name}}</span>
                <span>{{item.age}}</span>
                <span>{{item.wife}}</span>
            </li>
        </ul>
        <button @click="sortType=1">按年龄升序</button>
        <button @click="sortType=-1">按年龄降序</button>
        <button @click="sortType=0">按年龄的原本顺序</button>
    </div>
</body>
<script src="../../js/vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            userName:"",
            sortType:0, //0:原本顺序  1:升序  -1:降序
            list:[
                {id:0,name:"damu",age:18,wife:"冬雨"},
                {id:1,name:"damu1",age:14,wife:"gxx"},
                {id:2,name:"damu2",age:16,wife:"卫国"},
                {id:3,name:"damu3",age:27,wife:"建国"},
                {id:4,name:"damu4",age:20,wife:"狗蛋"},
                {id:5,name:"xiaole1",age:38,wife:"朦朦"},
                {id:6,name:"xiaole2",age:32,wife:"芳芳"},
                {id:7,name:"xiaole3",age:66,wife:"安妮"},
                {id:8,name:"xiaole4",age:11,wife:"二狗"},
            ]
        },
        computed:{
            filterList(){
                //根据userName 去匹配list中的数据

                //1. 这个api是用来做什么的
                //2. 这个api的参数有哪些
                //3. 这个api的返回值是什么
                //4. 当前这个数组api是否会影响老数组
                //filterList:过滤后的数据
                var filterList = this.list.filter( item =>{
                    //username 是否出现在 item.name中
                    return  item.name.includes(this.userName)
                })

                //拿到过滤后的数据进行排序
                switch (this.sortType){
                    case 1:
                        filterList.sort((a,b)=>a.age-b.age)
                        break;
                    case -1:
                        filterList.sort((a,b)=>b.age-a.age)
                        break;
                }

                return filterList

                // return this.list.filter( item => item.name.includes(this.userName))
            }
        }
    })
</script>
</html>